import React, { Component } from 'react';
import '../App.less';
import {observer} from "mobx-react";
import {Carousel} from  'antd-mobile'
import axios from  'axios'
@observer class Lunbo extends Component {
    constructor(props) {
        super(props)
        this.state={
            data:[],
            imgHeight:'200'
        }
    }
    componentDidMount(){
        axios.get('http://www.niuduxiu.com/pc/marquee/get.jhtml?typeName=%25E5%25BE%25AE%25E4%25BF%25A1%25E9%25A6%2596%25E9%25A1%25B5&r='+Math.random())
            .then((item)=>{
                this.setState({
                    data:item.data.data,
                    imgHeight:window.screen.width/3125*1192
                })
            })
    }
    render() {
        return (
            <div className="Lunbo">
                {this.state.data.length>0&&
                <Carousel
                    autoplay={true}
                    infinite
                >
                    {this.state.data.map(ii => (
                        <a
                            key={ii}
                            style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight}}
                        >
                            <img src={ii.path} alt=""/>
                        </a>
                    ))}
                </Carousel>
                }
            </div>
        );
    }
}

export default Lunbo;
